let vm = new Vue({
    //通过id选择器绑定指定组件
    el: '#app',
    delimiters: ['[[', ']]'],
    data: {
        //v-model
        username: '',
        password: '',
        password2: '',
        mobile: '',
        allow: '',
        image_code_url: '',
        uuid: '',
        image_code: '',
        sms_code_time: '获取短信验证码',
        //防止频繁发送短信
        send_sms_flag: false,

        //v-show,默认不展示
        error_name: false,
        error_password: false,
        error_password2: false,
        error_mobile: false,
        error_allow: false,
        error_image_code: false,
        //error-mssage
        error_name_message: '',
        error_mobile_message: '',
        error_image_code_message: ''
        
    },
    //页面展示完毕，自动调用，和vue生命周期有关
    mounted(){
        //生成验证码
        this.generate_image_url()
    },
    //定义实现方法
    methods: {
        //生成图形验证码
        generate_image_url(){
            this.uuid = generateUUID()
            this.image_code_url = '/image_codes/' + this.uuid + '/'
        },
        //发送短信验证码
        send_sms_code(){
            if(this.send_sms_flag == true){
                return
            }
            this.send_sms_flag = true

            let url = '/sms_code/' + this.mobile + '/?image_code=' + this.image_code + '&uuid=' + this.uuid
            axios.get(url,{
                responseType: 'json'
            }).then(response => {
                if (response.data.code == '0'){
                    //展示60秒倒计时，创建定时器，每隔一秒执行一次回调函数
                    let num = 60
                    let t = setInterval(() => {
                        if( num == 1){
                            //倒计时即将结束，停止回调，重新生成图形验证码，还原提示信息
                            clearInterval(t)
                            this.sms_code_time = '获取短信验证码',
                            this.generate_image_url()
                            this.send_sms_flag = false
                        }
                        else{
                            num -= 1
                            this.sms_code_time = num + '秒'
                        }
                    },1000)
                } else{
                    if(response.data.code == '4001'){
                        this.error_image_code_message = response.data.errmsg
                        this.error_image_code = true
                    } 
                    this.send_sms_flag = false
                }

            }).catch(error => {
                console.log('error response')
                this.send_sms_flag = false
            })
        },
        check_image_code(){
            //校验图形验证码
            if(this.image_code.length != 4){
                this.error_image_code_message = "请输入图形验证码"
                this.error_image_code = true
            } else {
                this.error_image_code = false
            }
        },
        check_username(){
            // 用户名是5-20个字符，[a-zA-Z0-9_-]
            // 定义正则
            let re = /^[a-zA-Z0-9_-]{5,20}$/;
            // 使用正则匹配用户名数据
            if (re.test(this.username)) {
                // 匹配成功，不展示错误提示信息
                this.error_name = false;
            } else {
                // 匹配失败，展示错误提示信息
                this.error_name_message = '请输入5-20个字符的用户名';
                this.error_name = true;
            }

            //判断用户名是否重复,当用户名满足条件时才会进行判断
            if(this.error_name == false){
                let url = '/usernames/' + this.username + '/count'
                //axios发送ajax get请求，第一个参数是url，第二个参数是请求头，这里的请求头只规定响应数据是json类型
                axios.get(url,{
                    //告诉后端返回参数类型为json类型
                    responseType: 'json'
                }).then(response => {
                    if (response.data.count == 1){  
                        //用户名已经存在了
                        this.error_name_message = '用户名已存在'
                        this.error_name = true
                    } else {
                        this.error_name = false
                    }
                }).catch(error => {
                    console.log(error)
                })
            }
        },
        //密码是否合理
        check_password(){
            let re = /^[0-9A-Za-z]{8,20}$/;
            if (re.test(this.password)) {
                this.error_password = false;
            } else {
                this.error_password = true;
            }
        },
        //确认密码
        check_password2(){
            if (this.password != this.password2) {
                this.error_password2 = true;
            } else {
                this.error_password2 = false;
            }
        },
        check_mobile(){
            let re = /^1[3-9]\d{9}$/;
            if (re.test(this.mobile)) {
                this.error_mobile = false;
            } else {
                this.error_mobile_message = '您输入的手机号格式不正确';
                this.error_mobile = true;
            }

            if(this.error_mobile == false){
                let url = '/mobiles/' + this.mobile + '/count'
                axios.get(url,{
                    responseType: 'json'
                }).then(response => {
                    if(response.data.count == 1)
                    {
                        this.error_mobile_message = '手机号已经注册过，换个手机号吧'
                        this.error_mobile = true
                    } else {
                        this.error_mobile = false
                    }
                }).catch(error => {
                    console.log(error)
                })
            }
        },
        check_allow(){
            if (!this.allow) {
                this.error_allow = true;
            } else {
                this.error_allow = false;
            }
        },
        on_submit(){
            this.check_username();
            this.check_password();
            this.check_password2();
            this.check_mobile();
            this.check_allow();
            this.check_image_code();

            // 在校验之后，注册数据中，只要有错误，就禁用掉表单的提交事件
            if (this.error_name == true || this.error_password == true || this.error_password2 == true || this.error_mobile == true || this.error_allow == true) {
                // 禁用掉表单的提交事件
                window.event.returnValue = false;
            }
        }
    }
})